import Icon from '@/components/Icon'
import { Button } from 'antd-mobile'
import React from 'react'
import './index.scss'

export default function Test() {
  return (
    <>
      <div>
        Login
        <hr />
        <Button color="primary" size="large">
          登录
        </Button>
        <Button block color="primary" size="large">
          注册
        </Button>
        <hr />
        <div className="box"></div>
        <hr />
        <div className="demo">我将来想要1px像素边框</div>
        <hr />
        <div className="test">我用封装的hairline函数实现1px</div>
        <hr />
        {/* svg图标的原生写法： */}
        {/* <svg className="icon">
        <use xlinkHref="#iconbtn_collect_sel"></use>
      </svg>
      <svg className="icon">
        <use xlinkHref="#iconbtn_mine_sel"></use>
      </svg>
      <svg className="icon">
        <use xlinkHref="#iconbtn_like_sel"></use>
      </svg> */}
        <Icon
          className="my-icon"
          name="iconbtn_collect_sel"
          onClick={() => {
            console.log(22)
          }}
        ></Icon>
        <Icon name="iconbtn_mine_sel"></Icon>
        {/* onClick这个名字是可以换的！一般不换 是希望使用组件的人保持原来的习惯使用组件！！ */}
        <Icon
          name="iconbtn_like_sel"
          onClick={() => {
            console.log(11)
          }}
        ></Icon>
        {/* <Icon name='12'></Icon> */}
      </div>
    </>
  )
}
